<dialog id="share_story_to_connector_dialog"
        class="modal"
        x-init="$nextTick(() => $el.showModal ? $el.showModal() : $el.setAttribute('open', 'open'))"
        x-on:close="$el.remove()">
  <div class="modal-box">
    <form method="dialog">
      <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
    </form>
    <h3 class="font-bold text-lg mt-1 mb-2">Share Stories</h3>
    <form>
      <label class="select w-full mb-5">
        <span class="label">Report</span>
        <select id="report" name="report" required class="validator select w-full">
          <option selected disabled>Select a connector</option>
          {% for option in connectors -%}
            <option value="{{ option.id }}">{{ option.name }}</option>
          {% endfor -%}
        </select>
      </label>
      {% for story_id in story_ids %}<input type="hidden" name="story_ids" value="{{ story_id }}">{% endfor %}
      <button type="button"
              class="btn btn-outline btn-wide"
              hx-post="{{ url_for('assess.submit_share_story') }}"
              hx-target="#assess"
              hx-on::after-request="document.getElementById('share_story_to_connector_dialog').close()">Share</button>
    </form>
  </div>
</dialog>
